/**
 * 设置仓库弹窗
 */

import React, { useState, useEffect } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { Modal, Checkbox, message, Tooltip } from 'antd';
import Iconfont from '@/components/IconFont';
import { isEmpty, findIndex, cloneDeep, pull } from 'lodash';
import {
  getWareHouseList,
  getJDWareHouseList,
  addWareHouse,
} from '../../service';
import '../../index.less';

export default ({ jingDongVisible, item, visible, handleOk, handleCancel }) => {
  const [data, setData] = useState([]);

  const [loading, setLoading] = useState(false);

  //在前台展示的数据
  const [selectData, setSelectData] = useState([]);

  useEffect(() => {
    if (visible) {
      handleGetListData();
    }
  }, [visible]);

  //获取仓库列表
  const handleGetListData = async () => {
    setLoading(true);
    let getWareHouse = getWareHouseList;
    if (jingDongVisible) {
      getWareHouse = getJDWareHouseList;
    }
    const { data, success } = await getWareHouse({
      networkId: item.networkId,
    });
    if (success) {
      setData(data);
    }
    setLoading(false);
  };

  //点击确定
  const onOk = async () => {
    if (selectData.length == 0) {
      Modal.info({
        content: '请先选择仓库！',
      });
      return;
    }
    setLoading(true);
    const params = {
      tempId: item.networkId,
      warehouseIds: selectData,
    };
    const res = await addWareHouse(params);
    setLoading(false);
    if (res.success) {
      message.success('添加成功！');
      handleOk();
    }
  };

  //是否否选检测
  const checkSelect = (id) => {
    if (selectData.includes(id)) {
      return true;
    }
    return false;
  };

  //点击仓库操作
  const handleWarehouseChange = (e, id) => {
    const val = e.target.checked;
    if (val) {
      const arr = [...selectData];
      arr.push(id);
      setSelectData(arr);
    } else {
      const arr = [...selectData];
      pull(arr, id);
      setSelectData(arr);
    }
  };

  return (
    <CommonModal
      title="添加可用仓库"
      visible={visible}
      onCancel={handleCancel}
      onOk={onOk}
      width="458px"
    >
      {jingDongVisible ? (
        <div className="jingDonBox">
          {Object.keys(data).map((v) => (
            <div key={v}>
              {v == 1 ? (
                <h4 className="m16 mt20">自发仓库：</h4>
              ) : (
                <h4 className="m16">
                  代发仓库
                  <Tooltip
                    placement="bottom"
                    title="选择代发仓，表示支持该代发仓库使用自己的快递来代发自己的订单"
                  >
                    <Iconfont className="storeIcon" type="iconwenhao1" />:
                  </Tooltip>
                </h4>
              )}
              <div className="jingDonBoxItem">
                {data[v].map((k) => (
                  <div className="jingDonItem" key={k.id}>
                    <Checkbox
                      style={{ margin: '16px' }}
                      checked={checkSelect(k.id)}
                      onChange={(e) => handleWarehouseChange(e, k.id)}
                    >
                      {k.warehouseName}
                    </Checkbox>
                  </div>
                ))}
              </div>
            </div>
          ))}
          {Object.keys(data).length == 0 && '暂无可用仓库'}
        </div>
      ) : (
        <div className="storeBox">
          {data.length > 0
            ? data.map((item) => {
                const { id, warehouseName } = item;
                return (
                  <div key={id} className="boxItem">
                    <Checkbox
                      style={{ margin: '16px' }}
                      checked={checkSelect(id)}
                      onChange={(e) => handleWarehouseChange(e, id)}
                    >
                      {warehouseName}
                    </Checkbox>
                  </div>
                );
              })
            : '暂无可用仓库'}
        </div>
      )}
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};
